<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="120px" label-suffix=":" class="expert-class" v-loading="loading">
            <el-form-item label="handle" prop="expert_name">
                <el-input v-model.trim="model.expert_name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.trim="model.email" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="kol_family_name">
                <el-input v-model.trim="model.kol_family_name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="达人电话" prop="kol_phone">
                <el-input v-model.trim="model.kol_phone" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="达人国家" prop="country">
                <el-input v-model.trim="model.country" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <template v-if="isEdit">
                <el-form-item label="达人地址" prop="address">
                    <el-input v-model.trim="model.address" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="达人省份" prop="province">
                    <el-input v-model.trim="model.province" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="达人城市" prop="city">
                    <el-input v-model.trim="model.city" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="达人邮箱" prop="post_code">
                    <el-input v-model.trim="model.post_code" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <!-- <el-form-item label="达人链接" prop="link">
                    <el-input v-model.trim="model.link" placeholder="请输入" clearable size="small" />
                </el-form-item> -->
                <el-form-item label="达人粉丝数量" prop="fan">
                    <el-input v-model.trim="model.fan" placeholder="请输入" clearable size="small" />
                </el-form-item>
                <el-form-item label="级别" prop="level">
                    <el-select v-model="model.level" placeholder="请选择" clearable size="small">
                        <el-option v-for="(dict, index) in COOPERATION_LEVEL" :key="index" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="店铺" prop="shop_id">
                    <el-select v-model="model.shop_id" placeholder="请选择" multiple clearable size="small" style="width: 240px">
                        <el-option v-for="(dict, index) in shopList" :key="index" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
            </template>
            <el-form-item label="个人链接" prop="platform_id" style="width: 100%;">
                <el-table :show-header="false" :data="model.link" border script style="width: 600px">
                    <el-table-column label="链接地址" min-width="200">
                        <template slot-scope="scope">
                            <el-input v-model.trim="scope.row" placeholder="请填写链接地址" clearable  style="width: 100%"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-plus" @click="addItem" v-if="scope.$index == 0"></el-button>
                            <el-button type="text" icon="el-icon-minus" @click="handleDelete(scope.$index)" v-else></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <template v-if="isEdit">
                <el-form-item label="建联人" prop="fb_admin_id">
                    <SelectPage
                        v-model="model.fb_admin_id"
                        placeholder="请选择建联人"
                        :url="$api.purchase.getPurchaserList"
                        show_field="username"
                        show_id="operater_id"
                        query_field="keyword"
                        filterable
                        clearable
                        multiple
                        popper-class="custom-select"
                    ></SelectPage>
                </el-form-item>

                <!-- <el-form-item label="是否合作" prop="is_cooperate">
                    <el-select v-model="model.is_cooperate" placeholder="请选择" clearable size="small" style="width: 240px">
                        <el-option v-for="(dict, index) in cooperateStatus" :key="index" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="合作模式" prop="type">
                    <el-select v-model="model.type" placeholder="请选择" clearable size="small" style="width: 240px">
                        <el-option v-for="(dict, index) in cooperateMode" :key="index" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item> -->
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editExpert, addExpert, getShop } from '@/api/expert'
import { COOPERATION_MODE, COOPERATE_STATUS, EXCELLENT_STATUS, PLATFORM_TYPE, COOPERATION_LEVEL } from '../../constant'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: '',
                expert_name: undefined,
                email: undefined,
                kol_family_name: undefined,
                kol_phone: undefined,
                platform: undefined,
                country: undefined,
                address: undefined,
                province: undefined,
                city: undefined,
                post_code: undefined,
                link: [],
                quotation: undefined,
                fan: undefined,
                remarks: undefined,
                fb_admin_id: undefined,
                is_cooperate: undefined,
                type: undefined,
            },
            rules: {
                expert_name: [{ required: true, message: '达人姓名不能为空', trigger: ['blur', 'change'] }],
                // email: [{ required: true, message: '邮箱不能为空', trigger: ['blur', 'change'] }],
                // kol_phone: [{ required: true, message: '达人电话不能为空', trigger: ['blur', 'change'] }],
            },
            platformType: PLATFORM_TYPE,
            // 审批结果
            cooperateMode: COOPERATION_MODE,
            // 是否合作
            cooperateStatus: COOPERATE_STATUS,
            // 是否优质达人
            excellentStatus: EXCELLENT_STATUS,
            COOPERATION_LEVEL,
            shopList: [],
        }
    },
    computed: {
        isEdit() {
            return !!this.model.id
        },
        title() {
            return `${this.isEdit ? '编辑' : '新增'}达人`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.model = Object.assign({}, this.model, val)
                    this.model.fb_admin_id = val.fb_admin_id?.split(',')?.map(item => Number(item)) ?? []
                    this.model.shop_id = val.show_field?.split(',')?.map(item => Number(item)) ?? []
                    this.model.link = Array.isArray(val.link) ? val.link : [val.link]
                    console.log('test', this.model)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async created() {
        this.loading = true
        try {
            const result = await getShop()
            this.shopList = result?.data ?? []
        } catch (error) {
            console.log(error)
        }
        this.loading = false
        if(!this.isEdit){
            this.addItem()
        }
    },
    methods: {
     addItem() {
            this.model.link.push("")
        },
        handleDelete(index) {
            this.$confirm('是否确认删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.model.link.splice(index, 1)
                    this.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { ...this.model }
                params.fb_admin_id = params.fb_admin_id.join(',')
                params.shop_id = params.shop_id.join(',')

                console.log(params)
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    editExpert(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addExpert(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.expert-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.expert-class.el-form .el-form-item .el-input {
    width: 240px;
}
.expert-class.el-form .el-form-item .el-textarea {
    width: 590px;
}
</style>
